<template>
  <div class="bind-table">
    <!-- 表格 -->
    <el-table
      ref="multipleTable"
      v-loading="tableData.loading"
      :data="tableData.data"
      style="width: 100%; font-weight: 400"
      element-loading-text="拼命加载中"
      :row-key="getRowKeys"
      :max-height="tableData.maxHeight"
      :height="tableData.height"
      @selection-change="handleSelectionChange"
      @current-change="handleCurrentChange"
      :border="tableData.border ? tableData.border : 'border'"
      :stripe="tableData.stripe"
      :highlight-current-row="openHighlight"
    >
      <el-table-column
        v-if="tableData.selection"
        :reserve-selection="true"
        type="selection"
        width="60"
        align="center"
      />
      <el-table-column
        v-if="tableData.showIndex"
        type="index"
        label="序号"
        width="50"
      />
      <slot name="column" />
      <template v-for="(item, index) in tableData.columns">
        <el-table-column
          v-if="item.slotName"
          :key="index + 'slot'"
          :prop="item.prop"
          :label="item.label"
          :min-width="item.minWidth"
          :sortable="item.sortable"
          :formatter="item.formatter"
          :fixed="item.fixed"
          :align="item.align ? item.align : 'center'"
          :show-overflow-tooltip="item.tooltip"
          :style="item.cellStyle"
        >
          <template slot-scope="scope">
            <!-- scope.row对应当前的一条数据 -->
            <slot
              :name="item.slotName"
              :data="scope.row"
              :index="scope.$index"
            />
          </template>
        </el-table-column>
        <el-table-column
          v-else
          :key="index"
          :prop="item.prop"
          :label="item.label"
          :min-width="item.minWidth"
          :sortable="item.sortable"
          :formatter="item.formatter"
          :fixed="item.fixed"
          :align="item.align ? item.align : 'center'"
          :show-overflow-tooltip="item.tooltip"
        />
      </template>
    </el-table>
  </div>
</template>
<script>
/**
 * columns prop label sortable align
 *  fixed 列是否固定在左侧或者右侧，true 表示固定在左侧
 * align 内容 居中 左边 右边
 * tooltip 是否有提示
 * type slot 开启slot
 * slotName 对应的名字
 */

export default {
  name: "Table",
  props: {
    tableData: {
      type: Object,
      default: () => {},
    },
    openHighlight: {
      type: Boolean,
      default: false,
    }
  },
  data() {
    return {
      height: 0,
    };
  },
  methods: {
    // 选中数据
    handleSelectionChange(val) {
      this.tableData.multipleSelection = val;
      this.$emit("handleTableChange", val);
    },
    handleCurrentChange(val){
      this.$emit("handleCurrentChange", val);
    },
    getRowKeys(row) {
      return row.id;
    },
    // 移除选中
    clearMultipleSelection() {
      this.$refs.multipleTable.clearSelection();
    },
    //   用于多选表格，切换某一行的选中状态，如果使用了第二个参数，则是设置这一行选中与否（selected 为 true 则选中）
    toggleMultipleSelection(row) {
      this.$refs.multipleTable.toggleRowSelection(row);
    },
    selectable(row, index) {
      if (this.$parent.forbidden(row)) {
        return true;
      } else {
        return false;
      }
    },
  },
};
</script>
<style scoped lang="scss">
  .bind-table{
    ::v-deep tr{
      cursor: pointer;
    }
  }
</style>